<template>
  <div  class="bodys">
    <div class="contents" v-for="(v,i) in goodsDisplay" :key="i">
      <img :src="v.image" alt="">
      <div class="right">
        <p class="goodsName">{{v.name}}</p>
        <p style="color: #666;font-size: 12px;">商品规格:{{v.spec_array}}
          <span style="color: #FF5230;font-size: 15px;float: right;">￥ {{v.sell_price}}</span></p>
        <div class="tuihuan" v-if="v.is_seven_return == 0">七天无忧退换货</div>
        <span style="margin-left: -16vw">× {{v.goods_number}}</span>
      </div>

      <div class="line"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "goods",
    props:["goodsDisplay"],
    mounted(){
    }
  }
</script>

<style scoped lang="scss">
  .bodys{
    width:92vw;
    height: auto;
    border-radius: 2.5vw;
    margin: 0px auto;
    background: #fff;
    box-shadow: 1px 0 1px 0px #ccc;
    /*padding-top: 2vw;*/
    .contents{
      padding-top: 4vw;
      .line{
        width:90%;
        height: 1px;
        margin: 0px auto;
        border-bottom:1px solid #f5f5f5;
        position: relative;
        margin-top: 2vw;
      }
      img{
        width: 21.33vw;
        height: 21.33vw;
        border-radius: 2vw;
        overflow: hidden;
        display: inline-block;
        border: 1px solid #ccc;
        margin-top: -1vw;
        margin-left: 2.5vw;
      }
      .right{
        float: right;
        width: 70%;
        padding-right: 2.5vw;
        .goodsName{
          overflow:hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp:2;
          height: 12vw;
          line-height: 6vw;
        }
        span{
          float: right;
          font-size: 15px;
          color: #666;
          margin-top: 0.5vw;
          margin-left: -11vw;
        }
        .tuihuan{
          color: #FF5230;
          border: 1px solid #FF5230;
          width: 32vw;
          height: 4.4vw;
          -webkit-border-radius: 2.5vw;
          -moz-border-radius: 2.5vw;
          border-radius: 2.5vw;
          font-size: 11px;
          text-align: center;
          line-height: 4vw;
          margin-top: 1vw;
          display: inline-block;
        }
        p{
          font-size: 13px;
          color: #333;
        }
      }
    }

  }
  /*  .line:last-child{
      border: none !important;
    }*/
</style>
